<div class="product_preview_temp2 swiper-container product_preview_tiledown{{productId}}">
    <ul class="product_preview_temp2-wrapper{{productId}}" style="width:100%">
      {% for image in previewImage %}
        {%- if image.alt == "" -%}
          {% assign image_alt = product | image_alt:'product'  %}
        {%- else -%}
            {% assign image_alt = image.alt %}
        {%- endif -%}
        {% if image.file_type == "video" %}
          <li class="swiper-slide">
            <div class="product_preview-video-container swiper-slide-video product_preview-video{{productId}}">
              <div style='position: relative;z-index: 10;' class="video-product_preview-box">
                <img style="width: 100%;height:100%;object-fit: cover;" class="video-product_preview-img" data-src="{{ image.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ image_alt }}"/>
                {%- include 'default_icon', icon:"video", height:"48", width:"48" -%}
              </div>
              <video src="{{image.params.url}}" controls="controls"></video>
            </div>
          </li>
        {% elsif image.file_type == "youtube" %}
          <li class="swiper-slide">
            <div class="product_preview-youtube-container">
              <iframe type="text/html" src="{{image.params.url}}?enablejsapi=1" frameborder="0"></iframe>
            </div>
          </li>
        {% else %}
          <li class="swiper-slide control-product_detail-picture_item" data-image-id="{{image.id}}">
            <a href="{{ productHref | default:'javascript:;'}}">
              <img style="width: 100%" data-src="{{ image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ image_alt }}"/>
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    {% if previewImage.size > 1  %}
      <div class="swiper-prev swiper-navigation product_preview_temp2-prev-{{productId}}">
        {%- include 'default_icon', icon:"arrow-left", height:"18", width:"18" -%}
      </div>
      <div class="swiper-next swiper-navigation product_preview_temp2-next-{{productId}}">
        {%- include 'default_icon', icon:"arrow-right", height:"18", width:"18" -%}
      </div>
    {% endif %}
  </div>
  <script>
    $(function() {
      var productId = "{{productId}}";
      var previewImage = {{previewImage|json}};
      var video = $(".product_preview-video" + productId);
      video.click(function() {
        var video = $(this).find("video");
        var videoIcon = $(this).find(".video-icon");
        if ($(this).find(".video-product_preview-img")) {
          $(this).find(".video-product_preview-img").css('visibility', 'hidden');
        }
        video.css({'z-index': '20', "position": "absolute"})
        videoIcon.hide()
        video[0].play()
      })
      video.find("video").each(function(key, item) {
        var videoIcon = $(this).siblings(".video-product_preview-box").find(".video-icon");
        item.addEventListener("play", function() {
          $(this).css({'z-index': '20', "position": "absolute"})
          videoIcon.hide()
        })
        item.addEventListener("pause", function() {
          $(this).css({'z-index': '1', "position": "absolute"})
          videoIcon.show()
        })
      })
  
      {% if source == "product_detail" %}
        var swiperImg = $('.product_preview_tiledown' + productId).find(".swiper-slide img");
        swiperImg.click(function () {
          const JqThis = $(this);
          const parentIndex = swiperImg.index($(this));
          moi.pictureImages( previewImage.filter(item=>item.file_type === "image").map(el=>el.src) , parentIndex, JqThis)
        })
      {% endif %}
  
      if (moi.isMobile() && previewImage.length) {
        var swiperName = ".product_preview_temp2-wrapper" + productId;
        $(swiperName).addClass("swiper-wrapper")
        var mySwiper = new Swiper(".product_preview_tiledown" + productId, {
          autoHeight: true,
          updateOnImagesReady: true,
          navigation: {
            nextEl: '.product_preview_temp2-next-' + productId,
            prevEl: '.product_preview_temp2-prev-' + productId
          }
        })
        moi.addEvent('lazyImg', function(event) {
          if (event.params && previewImage.findIndex(item => item.src == event.params) > -1) {
            mySwiper.updateAutoHeight()
          }
        })
      }
    })
  </script>
  